<template>
  <a-row :gutter="[16, 16]">
    <a-col :xs="24" :sm="12" :md="6" v-for="stat in stats" :key="stat.title">
      <a-card class="dashboard-card hover:shadow-lg transition-shadow duration-300">
        <template #title>
          <span class="text-lg font-semibold">{{ stat.title }}</span>
        </template>
        <template #extra><a href="#" class="text-blue-500 hover:text-blue-700">详情</a></template>
        <p class="text-3xl font-bold">{{ stat.value }}</p>
      </a-card>
    </a-col>
  </a-row>
  <a-row :gutter="[16, 16]" style="margin-top: 20px;">
    <a-col :xs="24" :md="12">
      <a-card class="dashboard-chart hover:shadow-lg transition-shadow duration-300">
        <template #title>
          <span class="text-lg font-semibold">{{ recentOrderTitle }}</span>
        </template>
        <v-chart class="chart" :option="recentOrderChartOption" autoresize />
      </a-card>
    </a-col>
    <a-col :xs="24" :md="12">
      <a-card class="dashboard-chart hover:shadow-lg transition-shadow duration-300">
        <template #title>
          <span class="text-lg font-semibold">{{ salesTrendTitle }}</span>
        </template>
        <v-chart class="chart" :option="salesTrendChartOption" autoresize />
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { ref, reactive } from 'vue';
import VChart from 'vue-echarts';
import * as echarts from 'echarts';

export default {
  components: {
    VChart
  },
  setup() {
    const stats = reactive([
      { title: '今日访问量', value: 1234 },
      { title: '昨日访问量', value: 5678 },
      { title: '本周访问量', value: 9012 },
      { title: '本月访问量', value: 34567 }
    ]);

    const recentOrderTitle = ref('最近订单');
    const recentOrderChartOption = ref({
      // ... your chart options
      xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
      yAxis: { type: 'value' },
      series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }]
    });

    const salesTrendTitle = ref('销售趋势');
    const salesTrendChartOption = ref({
      // ... your chart options
      xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
      yAxis: { type: 'value' },
      series: [{ data: [100, 120, 150, 180, 200, 220], type: 'bar' }]
    });


    return {
      stats,
      recentOrderTitle,
      recentOrderChartOption,
      salesTrendTitle,
      salesTrendChartOption
    };
  }
};
</script>

<style scoped>
.dashboard-card, .dashboard-chart {
  height: 100%;
}
.chart {
  height: 300px;
}
</style>

